<template>
  <div class="DataInsight">
    <div class="task_list">
      <div class="task_list_left_top_name">
        <div class="icon_box">
          <i class="iconfont icon-yueyongdianliangbili"></i>
        </div>

        <div class="name">核算数据透视</div>
      </div>
      <div class="task_list_left_top_btn">
        <a-form
          class="form_"
          layout="inline"
          @keyup.enter.native="searchQuery"
          style="display:flex"
        >
          <a-form-item label="填报周期" :labelCol="labelCol" :wrapperCol="wrapperCol">
            <a-range-picker
              style="width: 210px"
              v-model="queryParam.createTimeRange"
              format="YYYY-MM-DD"
              :placeholder="['开始时间', '结束时间']"
              @change="onDateChange"
              @ok="onDateOk"
            />
          </a-form-item>
          <a-dropdown style="display:flex; align-items: center;">
            <a class @click.prevent>
              <div class="select" style="color:#999;font-size:14px">显示为</div>
              <a-icon type="down" />
            </a>
            <template #overlay>
              <a-menu @click="onClick">
                <a-menu-item key="1">看板</a-menu-item>
                <a-menu-item key="2">图表</a-menu-item>
              </a-menu>
            </template>
          </a-dropdown>
          <a-button>刷新</a-button>
          <a-button>重置</a-button>
          <a-button>查询</a-button>
        </a-form>
      </div>
    </div>

    <!-- 视图 -->
    <div class="DataInsight_bottom">
      <Chart v-if="view == '2'"></Chart>
      <Panel v-else></Panel>
    </div>
  </div>
</template>
<script>
import Chart from "./DataInsight/Chart.vue";
import Panel from "./DataInsight/Panel.vue";
export default {
  data() {
    return {
     
      view: "1",
      queryParam: {}
    };
  },
  components: {
    Chart,
    Panel
  },
  methods: {
    onClick(val) {
      //   console.log(val);
      this.view = val.key;
    },
    searchQuery() {},
    onDateChange() {}
  }
};
</script>

<style lang="scss">
@import "@/assets/css/dataInsight.scss";
@import "@/assets/css/scrollbar.scss";
</style>